//加载公共样式
require('../../assets/css/index.less')

//加载自己的样式
require('./sports-data.less')

const echarts = require('echarts')
window.onload = () => {
  //渲染柱状图
  function renderBar(data, xData) {
    //1 创建实例对象
    const myChart = echarts.init(document.querySelector('#bar'))

    //2 写上配置项
    let option = {
      //标题组件
      title: {
        text: '近7天运动时长',
        left: 15,
        top: 15,
      },
      //提示框组件
      tooltip: {},
      //图例组件
      // legend: {},
      xAxis: {
        data: xData,
        //['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11']
      },
      yAxis: {},
      //核心数据
      series: [
        {
          name: '销量1',
          //type bar柱状图 pie饼图 line折线图
          type: 'bar',
          data: data,
          // [5, 20, 76, 10, 60, 80, 150]
        },
      ],
    }

    //3 载入配置
    myChart.setOption(option)
  }

  renderBar(
    [5, 20, 76, 10, 60, 80, 150],
    ['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11']
  )

  //渲染饼图
  function renderPie() {
    //1 创建实例
    const myChart = echarts.init(document.querySelector('#pie'))

    //2 配置项
    let option = {
      title: {
        text: '运动分类',
        left: 15,
        top: 15,
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        top: 'middle',
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            {
              value: 40,
              name: '训练',
              label: {
                // show: false,
                position: 'inside',
                color: '#fff',
                formatter: '{c}%',
              },
              itemStyle: {
                color: '#58bb92',
              },
            },
            {
              value: 25,
              name: '跑步',
              label: {
                position: 'inside',
                color: '#fff',
                formatter: '{c}%',
              },
              itemStyle: {
                color: '#736171',
              },
            },
            {
              value: 35,
              name: '骑行',
              label: {
                position: 'inside',
                color: '#fff',
                formatter: '{c}%',
              },
              itemStyle: {
                color: '#ee5c43',
              },
            },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    }

    //3 导入配置
    myChart.setOption(option)
  }
  renderPie()
}
